import { useEffect } from 'react';
import styles from './index.module.less';
import { EchartsPie } from './pie';

export const SecondMass = (props) => {
  console.log(props);

  useEffect(() => {}, []);

  const list = [
    { value: 1233, name: '60%以下' },
    { value: 759, name: '60%～80%' },
    { value: 3555, name: '60%～90%' },
    { value: 134, name: '90%～100%' },
    { value: 134, name: '100%及以上' },
  ];
  const list1 = [
    { value: 1233, name: '1-2#' },
    { value: 1111, name: '3-4#' },
    { value: 1555, name: '5-6#' },
    { value: 134, name: '7#及以上' },
  ];
  const list2 = [
    { value: 1233, name: '1#' },
    { value: 1111, name: '2#' },
    { value: 1555, name: '3#' },
    { value: 555, name: '4#' },
    { value: 134, name: '5#及以上' },
  ];

  return (
    <div className={styles.productStr}>
      <div className={styles.title}>二批活跃质量(单位：家数)</div>
      <div className={styles.structure}>
        <div className={styles.name1}>分档次二批达成情况</div>
      </div>
      <div className={styles.structure}>
        <EchartsPie width={'33%'} size={['40%', '60%']} name={'总量'} list={list} />
        <EchartsPie width={'33%'} size={['40%', '60%']} name={'超高端及以上'} list={list} />
        <EchartsPie width={'33%'} size={['40%', '60%']} name={'高端'} list={list} />
      </div>
      <div className={styles.structure}>
        <div className={styles.name2}>SKU加载</div>
      </div>
      <div className={styles.structure}>
        <EchartsPie width={'33%'} size={['40%', '60%']} name={'总SKU加载分布'} list={list1} />
        <EchartsPie width={'33%'} size={['40%', '60%']} name={'超高端SKU加载分布'} list={list2} />
        <EchartsPie width={'33%'} size={['40%', '60%']} name={'高端SKU加载分布'} list={list2} />
      </div>
    </div>
  );
};
